import React, { PureComponent } from "react";
import { connect } from "dva";
import { Modal, Row, Col, Form, Icon, Select } from "antd";

const FormItem = Form.Item;
const { Option } = Select;

@connect()
@Form.create()
export default class WhiteListAdd extends PureComponent {
  constructor(props) {
    super(props);
  }


  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.callback(values);
      }
    });
  }

  handleReset = () => {
    this.props.form.resetFields();
  };

  handleCancel = () => {
    this.handleReset();
    this.props.onCancel(false);
  };

  handleAgreementCancel = () => {
    this.setState({
      agreement_visible: false
    });
  };

  getAgreement(e) {
    e.preventDefault();

    this.setState({
      agreement_visible: true
    });
  }



  render() {
    const { reason, visible } = this.props;
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 }
    };


    return (
      <div>
        <Modal
          title={"将设备加入白名单"}
          okText={"确认"}
          visible={visible}
          onOk={this.handleSubmit.bind(this)}
          // confirmLoading={loading.submitting}
          onCancel={this.handleCancel}
        >
          <Form layout="horizontal">
            <Row gutter={24}>
              <Col span={24} style={{marginBottom:20}}>
                <Icon type="exclamation-circle" style={{marginRight:10,color:'#FFD113'}} />加入白名单后，当监测到设备异常时，将不再收到告警提示
              </Col>
              <Col span={24}>
                <FormItem {...formItemLayout} label="选择原因" colon={false}>
                  {getFieldDecorator("reason", {
                    rules: [
                      {
                        required: true,
                        message: "请选择加入白名单的原因"
                      }
                    ]
                  })(
                    <Select placeholder="请选择加入白名单原因" getPopupContainer={triggerNode => triggerNode.parentNode}>
                      {reason && reason.map(item => (
                        <Option key={item.value} value={item.value}>{item.label}</Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
      </div>
    );
  }
}
